<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闪电秒杀-欢迎注册</title>
    <link rel="stylesheet" href="../css/regist.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <!-- 1.logo区域 -->
    <div class="logo">
        <a href="../index.html">
            <img src="../images/shandianmiaosha_logo.png" style="width: 170px; height: 60px;">
        </a>
        <b></b>
    </div>

    <!-- 2.大横条 -->
    <div class="tip">
        <!-- logo -->
        <img src="../images/!_logo.png" style="width: 20px; height: 20px;margin-top: 8px;margin-bottom: 14px; position: absolute; left: 520px; float: left;">
        <!-- 文字 -->
        <div class="tip-word">
            <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！</p>
        </div>
    </div>

    <!-- 3.中部 -->
    <div class="content">
        <div class="content-picture">
            <div class="login">

                <!-- (1)顶部横条 -->
                <div class="login-top">
                    <img src="../images/!_logo.png" style="width: 20px; height: 20px;margin-top: 12px;float: left; margin-left: 10px">
                    <!-- 文字 -->
                    <p class="words">闪电秒杀不会以任何理由要求您转账汇款，谨防诈骗。</p>
                </div>

                <!-- (2)注册登录选项 -->
                <div class="acc">
                    <div class="regist">
                        <span>账户注册</span>
                    </div>

                    <a href="login.jsp">
                        <div class="login">
                            <span>账户登录</span>
                        </div>
                    </a>
                </div>

                <!-- (3)form表单 -->
                <form class="formBtn">
                    <input type="text" placeholder="请输入手机号码" class="telno">
                    <span class="telno-must"></span>

                    <input type="password" placeholder="请设置密码" class="psw">
                    <span class="psw-must"></span>

                    <input type="text" placeholder="请输入短信验证码" class="check">
                    <input type="button" class="sendMsg" value="发送短信验证码" style="width: 100px; height: 40px; margin-top: 0px; padding: 4px;font-size: 11px; background-color: rgb(230, 0, 0);border: none;color: white">
                    <span class="check-msg"></span>

                    <input type="button" value="注   册" class="registBtn">
                </form>

                <!-- (4)跳过 -->
                <div class="dibu">
                    <div class="pass">
                        <img src="../images/next.png" style="height: 24px; width: 24px; position: absolute; top: 55px; left: -220px;">
                        <a href="../index.jsp">
                            <span>跳过</span>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- 4.底部 -->
    <p class="ps">Copyright © 2004-2022  京东JD.com 版权所有</p>

    <script src="../js/regist.js"></script>
    <script>

        //1.点击 ”获取验证码“ ===> (1).手机号码格式合格 --> (2).【验证号码是否已注册账号（DB 查询比较）】
        $(".sendMsg").click(function (){

            //(1).手机号码格式验证
            if($(".telno-must").text() != '')
                $(".check-msg").text("请核对您的手机号是否正确！");

            else{
                //(2).【验证号码是否已注册账号（DB 查询比较）】
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/users/checkTelno",
                    data:{
                        userTelno:$(".telno").val()
                    },
                    success:function (result) {
                        console.log("result:" + result);
                        if (result == false) {
                            $(".telno-must").text("此号码已存在账号，请直接登录！")
                            $(".check-msg").text("")
                        }
                        else {
                            $(".check-msg").text("验证码已发送，请于5分钟之内完成注册！")
                            $.ajax({
                                type:"post",
                                url:"${pageContext.request.contextPath}/msm/send/" + $(".telno").val(),
                                data:{
                                    phone:$(".telno").val()
                                },
                                success:function (data) {
                                    console.log(data);
                                    var phone = data.phone;
                                    var code = data.code;

                                    //2.单击注册按钮，验证手机号和验证码
                                    $(".registBtn").click(function(){
                                        if($(".telno").val() == phone && $(".check").val() == code){

                                            //3.添加数据到 db
                                            $.ajax({
                                                type:"post",
                                                url:"${pageContext.request.contextPath}/users/save",
                                                data:{
                                                    userTelno:$(".telno").val(),
                                                    userPwd:$(".psw").val()
                                                },
                                                success:function (result) {
                                                    console.log(result)
                                                    console.log("aaa:" + result.resultcode)
                                                    if(result.resultcode == 200) {
                                                        $(".check-msg").text("注册成功！欢迎使用闪电秒杀！");
                                                    }
                                                }
                                            })
                                        }else
                                            $(".check-msg").text("手机号码或验证码错误，请核对后重试！");
                                    })
                                }
                            })
                        }
                    }
                })
            }
        })

        //直接点击注册 ==> 1.先验证用户是否已存在 --> 2.不存在，去 redis中找验证码进行核对 --> 3.核对成功，存入db
        $(".registBtn").click(function (){
            if( $(".telno-must").text() === "" && $(".psw-must").text() == "" && $(".check-msg").text() == ""){

                //1.先验证用户是否已存在
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/users/checkTelno",
                    data:{
                        userTelno:$(".telno").val()
                    },
                    success:function (result) {
                        console.log("result:" + result);
                        if (result == false) {
                            $(".telno-must").text("此号码已存在账号，请直接登录！")
                            $(".check-msg").text("")
                        }else{

                            //2.不存在，去 redis中找验证码进行核对
                            var code = null;
                            $.ajax({
                                type:"post",
                                url:"${pageContext.request.contextPath}/msm/checkCode",
                                data:{
                                    userTelno:$(".telno").val()
                                },
                                success:function (data) {
                                    code = data;
                                    console.log("code:" + code);
                                    if (code == $(".check").val()) {

                                        //3.核对成功，存入db
                                        $.ajax({
                                            type:"post",
                                            url:"${pageContext.request.contextPath}/users/save",
                                            data:{
                                                userTelno:$(".telno").val(),
                                                userPwd:$(".psw").val()
                                            },
                                            success:function (result) {
                                                console.log(result)
                                                console.log("aaa:" + result.resultcode)
                                                if(result.resultcode == 200) {
                                                    $(".check-msg").text("注册成功！欢迎使用闪电秒杀！");
                                                }
                                            }
                                        })
                                    }else
                                        $(".check-msg").text("手机号码或验证码错误，请核对后重试！");
                                }
                            })
                        }
                    }
                })
            }
        })

    </script>

</body>
</html>